<!-- XiaoQ 页面模板 -->
<template>
    <!-- 页面背景和整体布局 -->
    <div id="XiaoQ" class="bg-[#e4edfc] 
    min-h-screen overflow-scroll w-screen">
        <!-- 顶部固定头部 -->
        <header class="h-12 fixed top-0 
            w-screen flex items-center 
            justify-between px-5 z-10 
            bg-[#e4edfc]">
            <!-- 返回按钮 -->
            <van-icon name="cross" size="18" color="black" class=" font-bold" @click="goBack" />
            <!-- 小Q图标 -->
            <van-icon class-prefix="iconfont icon-Qi" size="22" :style="{
                background:
                    'linear-gradient(to top right, #e1ecfe, blue)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent'
            }">
            </van-icon>
            <!-- 空间填充 -->
            <div class="w-6"></div>
        </header>
        <!-- 分割线 -->
        <hr class="border border-b-white mt-12">
        <!-- 页面主要内容 -->
        <main>
            <!-- AI翻译功能区域 -->
            <section v-if="active == 0" class="w-screen min-h-96 py-3">
                <AiTranslate :items="aiTranslateState" />
            </section>
            <!-- AI辅导功能区域 -->
            <section v-if="active == 1" class="w-screen min-h-96 py-3">
                <AiTutoring :items="aiTuToringState" />
            </section>
        </main>
        <!-- 分割线 -->
        <hr class="h-36 w-0">
        <!-- 底部固定栏 -->
        <footer class="fixed bottom-0 
        w-screen h-36 
        flex flex-col 
        justify-between
         bg-white p-4">
            <!-- 功能切换按钮 -->
            <div class="text-xs 
            w-screen 
            px-4 
            font-bold 
            text-[#AAAAAA]">
                <!-- 循环生成功能标签 -->
                <span class="px-2 py-1
                 rounded-3xl mr-2" v-for="(item, index) in aiTypeState" :key="item.id"
    :class="[active === index ? 'bg-[#d5e2f8] text-[#7B68EE]' : 'bg-[#f1efef]']"
                    @click="changeFunc(index)">
                    {{ item.type }}
                </span>
            </div>
            <!-- 输入框 -->
            <van-cell-group inset 
            class="border-2 p-0 border-solid border-[#5555FF]">
                <van-field class="h-20 text-sm" 
                    type="textarea" 
                    v-model="input"
                    :placeholder="aiTypeState[active].placeholder" />
            </van-cell-group>
            <!-- 发送按钮 -->
            <div class=" absolute right-10 bottom-5">
                <van-button size="small" 
                :disabled="!input || input.trim() === ''" 
                @click="sendMessage">
                    <van-icon 
                    class-prefix="iconfont icon-fasong text-2xl" 
                    class="text-[#7B68EE]" />
                </van-button>
            </div>
        </footer>
    </div>
</template>

<!-- Vue脚本部分 -->
<script setup lang="ts">
// 导入Vue响应式属性和路由工具
import { toRefs } from 'vue';
import { useRouter } from 'vue-router';
// 导入AI状态管理store
import { useAiStore } from '@/stores/AIStore';

// 获取AI store中的数据
const aiStore = useAiStore();
// 解构store中的响应式状态
const { aiTranslateState,
    aiTuToringState,
    aiTypeState,
    active, input } = toRefs(aiStore);
// 导入store中的方法
const { addMessage } = aiStore;

// 初始化路由
const router = useRouter();

// 返回上一页
const goBack = () => {
    router.go(-1);
};

// 切换功能
const changeFunc = (index: number) => {
    active.value = index;
};

// 发送消息
const sendMessage = async () => {
    // 调用store中的addMessage方法发送消息
    const res = await addMessage(input.value, active.value);
    // 根据active值的不同，将回复消息添加到不同的数组中
    if (active.value == 0) {
        aiTranslateState.value.push(res.messages[0]);
    } else if (active.value == 1) {
        aiTuToringState.value.push({ 
            role: "user", 
            type: "message", 
            content: input.value, 
            content_type: "string" 
        });
        aiTuToringState.value.push(res.messages[0]);
    }
    // 清空输入框
    input.value = "";
    console.log(aiTuToringState.value);
};
</script>

<style scoped></style>